<template>
    <div class="pdf-sign">
        <div class="sign-header">
            <el-button size="mini" @click="show = false">取消</el-button>
            <el-button size="mini" type="primary" @click="getSigned = true">完成签署</el-button>
        </div>
        <PdfSign :pdfUrl="pdfUrl" :signList="signList" :width="pdfWidth" @addSign="showEsign = true" :getSigned="getSigned" @onSignedList="onGetSignedList" @onDeleteSign="onDeleteSign"/>
        <Esign :showSign.sync="showEsign" :signUploadOption="signUploadOption" @onsuccessSign="onsuccessSign" @onerrorSign="onerrorSign" />
    </div>
</template>
<script>
import PdfSign from './PdfSign.vue'
import Esign from './Esign.vue'
import { Button } from 'element-ui'
export default {
  name: 'pdf-sign',
  components: {
    Esign,
    PdfSign,
    ElButton: Button
  },
  props: {
    signUploadOption: {
      type: Object,
      default: () => {
        return {
          accept: 'image/png,image/jpeg,image/gif',
          drag: true,
          multiple: false,
          action: '/file/upload/single',
          data: {}
        }
      }
    },
    signList: {
      type: Array,
      default: () => [
        {src: 'http://dxcrm-api.com:8081/file/common/e67f0506541f4f8da6eb5be6b88e5538.png'}
      ]
    },
    pdfUrl: {
      type: String,
      default: 'http://localhost:8081/file/contract/惠州炬威电子有限公司销售合同C300-1840-21-11.10.pdf'
    },
    pdfWidth: {
      type: Number,
      default: 800
    }

  },
  data () {
    return {
      showEsign: false, // 签名弹窗状态
      getSigned: false
    }
  },
  methods: {
    // 签名保存/上传成功
    onsuccessSign (data) {
      this.$emit('onsuccessSign', data)
      console.log('签名保存/上传成功', data)
    },
    // 签名保存/上传失败
    onerrorSign (err) {
      this.$emit('onerrorSign', err)
      console.log('签名保存/上传失败', err)
    },
    onGetSignedList (list) {
      this.getSigned = false
      this.$emit('onautograph', list)
      console.log('完成签署，签名/图章信息', list)
    },
    onDeleteSign (item) {
      this.$emit('ondeleteSign', item)
      console.log('删除签名图片数据', item)
    }
  }
}
</script>
<style lang="scss" scoped>
.pdf-sign{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .sign-header{
        border-bottom: 1px solid #ccc;
        padding: 10px 15px;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}
</style>
